<template>
  <div class="about">
    <el-card class="deviceCard " @click="testMqtt(vd.topic,vd.power)" :class="{ isPowerOn:vd.power,isPowerOff:!vd.power,isLineDown:!vd.line}" :key="vd.key"  v-for="vd in deviceList" shadow="always">
      {{vd.name}}
    </el-card>
  </div>
</template>
<script>

export default {
  data(){
    return{
      'Home':"123",
      power:true,
      客户端名字列表: [
        {
          编号: "power_dc4f22c5c408",
          名字: "廊坊-主卧室",
        },
        {
          编号: "power_dc4f22c5c985",
          名字: "缑庄-二楼东",
        },
      ],
      deviceList:[
        // {key:1,name:"测试",topic:"",line:false,power:false}
      ],
    }
  },
  mounted() {
    this.获取所有设备状态()
  },
  methods:{
    testMqtt(topic,power){
      let postData={
        topic:topic,
        pubjson:{
          power:power?0:1,
          clientID:"webClient006"
        },
      }
      let _this=this
      this.$axios("MqttPub",postData,function (data){
        console.log("testMqtt",data)
        _this.获取所有设备状态()
      },function (errCode){
        console.log("testMqtt错误码：",errCode)
      },function (errInfo){
        console.log("testMqtt错误信息:",errInfo)
      })
    },
    获取所有设备状态(){
      console.log("ceshi")
      let postData={
        name:"test",
      }
      let _this=this
      this.$axios("MqttSubList",postData,function (data){
        console.log("测试数据",data)
        let DevList = data.data
        let dlist =[]
        let Num=0
        for (let key in DevList){
          // console.log("key",key)
          let devObj = JSON.parse(DevList[key].Data)
          let 客户端名字= ""
          for (let 客户端临时名字 of  _this.客户端名字列表){
            if (客户端临时名字.编号===devObj.clientID){
              客户端名字=客户端临时名字.名字
            }
          }
          if (客户端名字===""){
            客户端名字=devObj.clientID
          }
          dlist.push({
            key:Num,
            topic:key,
            name:客户端名字,
            line:DevList[key].Line,
            power:devObj.power===1
          })
          Num++
        }
        console.log(dlist)
        _this.deviceList=dlist

      },function (errCode){
        console.log("错误码：",errCode)
      },function (errInfo){
        console.log("错误信息:",errInfo)
      })
    },
  },
  components: {

  }
}
</script>

<style scoped>
.about{
  display: flex;
  height: 160px;
  /*一行排不下，换行*/
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.deviceCard{
  height: 150px;
  width: 150px;
  margin: 7px;
  font-size: 20px;
}

.isPowerOff{
  box-shadow: 0 0 12px 0 red;
  border: 2px solid red;
  border-radius: 6px;
}

.isPowerOn{
  box-shadow: 0 0 12px 0 #02AA02;
  border: 2px solid #02AA02;
  border-radius: 6px;
}

.isLineDown{
  box-shadow: 0 0 12px 0 #727272;
  border: 2px solid #727272;
  border-radius: 6px;
}

</style>